<template>
  <div class="login" id="login">
    <p class="title-word">
      <!-- <img src="../../image/login-word1.png" alt="" /> -->
      绍兴市旅游项目demo
    </p>
    <div class="content-wrap">
      <img src="../../image/logintupian.png" alt="" class="login-left" />
      <div class="login-content">
        <h4>用户登录</h4>
        <form>
          <div class="login-user">
            <div class="login-person">
              <img src="../../image/person.png" width="9%" />
            </div>
            <div class="login-input">
              <input
                type="text"
                v-model="formData.userMobile"
                placeholder="请输入用户名"
                class="username"
              />
            </div>
          </div>
          <!-- <div class="login-user"> -->
          <!-- <div class="login-person">
              <img src="../../image/suozi.png" width="8%" />
            </div>
            <div class="login-input">
              <input
                type="password"
                v-model="formData.userPassword"
                placeholder="请输入密码"
                class="password"
              />
            </div> -->
          <!-- </div> -->
          <!-- <div class="resgin">
            <div class="resgin-pass">
              <label for="resgin-check1">
                <input
                  type="checkbox"
                  class="resgin-check"
                  id="resgin-check1"
                />&nbsp;记住密码
              </label>
            </div>
          </div> -->
          <button id="login-but" type="button" @click="login">登录</button>
        </form>
      </div>
    </div>
    <!-- <p class="company-tit">技术支持&版权所有单位：山东云晓乐网络科技有限公司</p> -->
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import {userList} from '@/utils/util'
export default {
  name: "login",
  data() {
    return {
      formData: {
        userMobile: "",
        userPassword: "",
      },
      rules: {
        userMobile: {
          required: true,
          requiredMsg: "账号不能为空",
        },
        // userPassword: {
        //   required: true,
        //   requiredMsg: "密码不能为空",
        // },
      },
    };
  },
  methods: {
    ...mapMutations(["setUserInfo", "setOpt"]),
    login() {
      if (!this.validateForm()) {
        return false;
      }
      // this.$post("/exter/manage/login", this.formData).then((result) => {
      //   let opt = [];
      //   result.buss.password = this.formData.userPassword;
      //   if (result.buss.operCodeList.length) {
      //     result.buss.operCodeList.forEach((item) => {
      //       opt.push(item.operateCode);
      //     });
      //   }
      //   this.setUserInfo(result.buss);
      //   this.setOpt(opt);
      //   this.$router.push("/mapDispatch");z
      // });
      
      const obj = userList.find(item => item.account === this.formData.userMobile)
      if(obj){
        this.setUserInfo(obj)
        this.$router.push('mapDispatch')
      }else {
        this.$message.warning('账号不正确')
      }
    },
  },
};
</script>

<style scoped>
.login {
  background: url(../../image/bg_denglu.png) no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  font-family: serif;
}
.title-word {
  min-width: 1200px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  font-size: 48px;
  background-color: #1307ba;
  line-height: 95px;
  padding: 20px;
  font-family: Adobe HeitiStd-Regular !important;
  letter-spacing: 10px;
  font-weight: 500;
}
.title-word img {
  width: 90px;
  height: 103px;
  vertical-align: top;
}
.content-wrap {
  width: 1200px;
  height: 690px;
  margin: 0 auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -30%);
}
.login-left {
  float: left;
}
.login-content {
  float: right;
  /* position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -235px;
    margin-top: -169px; */
  width: 470px;
  height: 350px;
  background: #e9f3ff;
  border-radius: 20px;
}
.company-tit {
  color: #fff;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  font-size: 16px;
  background-color: #1307ba;
  padding: 30px 0 20px 0;
  font-family: Adobe HeitiStd-Regular !important;
}

.login-content h4 {
  color: #1385ff;
  font-size: 24px;
  text-align: center;
  margin: 25px 0;
  margin-top: 70px;
  font-weight: normal;
}

.login-user {
  display: flex;
  width: 70%;
  height: 45px;
  line-height: 45px;
  border-radius: 5px;
  margin: 0 auto;
  margin-bottom: 30px;
  border: 1px solid #1289ff;
  position: relative;
}

.login-person img {
  position: absolute;
  top: 10px;
  left: 10px;
}

.resgin {
  width: 70%;
  margin: 0 auto;
  margin-top: 40px;
  margin-bottom: 40px;
  color: #0c89ff;
  display: flex;
  justify-content: space-between;
}

.login-person {
  width: 15%;
}

.login-input {
  width: 100%;
}
.login-input input {
  width: 90%;
  height: 38px;
  border: none;
  outline: none;
  background: #e9f3ff;
}

#login-but {
  width: 70%;
  margin: 0 auto;
  display: block;
  height: 45px;
  line-height: 45px;
  background: #1385ff;
  font-size: 18px;
  color: white;
  border: none;
  outline: none;
  cursor: pointer;
}

.resgin-pass .resgin-check {
  position: relative;
  top: 2px;
}

.resgin-forget a {
  text-decoration: none;
  color: #1385ff;
}
</style>
